<template>
    <el-checkbox-group v-model="selectedVal">
        <el-checkbox
            v-for="(item, index) in configBuilds"
            :label="item.id"
            style="width: 120px;"
            :key="index">
            {{ item.id }} ) {{ item.val.name }}
        </el-checkbox>
    </el-checkbox-group>
</template>

<script>
export default {
    props: {
        value: {},
        type: {},
        form: {
            type: Boolean,
            default: false,
        },
        // 多选
        multiple: {
            type: Boolean,
            default: true,
        },
        // 可清除
        clearable: {
            type: Boolean,
            default: true,
        }
    },
    data () {
        return {
            selectedVal: [],
        };
    },
    computed: {
        configBuilds () {
            return this.$store.state.configBuild.all;
        },
    },
    watch: {
        value() {
            this.syncForm();
        },
        selectedVal() {
            this.$emit('input', this.selectedVal);
        }
    },
    methods: {
        getData() {
            if (!this.configBuilds.length) this.$store.dispatch('configBuild/All', 'configBuild');
        },
        syncForm() {
            this.selectedVal = this.value;
        },
    },
    created() {
        this.getData();
        this.syncForm();
    }
}
</script>

<style scoped>

</style>
